<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IPTV</title>
    <!-- 引入 Element UI 的 CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入自定义 CSS -->
    <link rel="stylesheet" href="styles.css">
    <!-- TCPlayer -->
    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.min.css" rel="stylesheet"/>
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/TXLivePlayer-1.2.3.min.js"></script>
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/hls.min.1.1.6.js"></script>
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/flv.min.1.6.3.js"></script>
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/dash.all.min.4.5.2.js"></script>
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js"></script>
</head>
<body>
<div id="app">
    <h1>MY IPTV</h1>
    <div class="search-container">
        <el-input
                v-model="searchQuery"
                placeholder="搜索频道"
                @input="filterChannels"
                class="input-with-select"
                clearable>
                <el-select v-model="statusValue" slot="append" placeholder="请选择" @change="fetchData">
                    <el-option
                            v-for="item in cities"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        <span style="float: left">{{ item.label }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    </el-option>
                </el-select>
        </el-input>
    </div>
    <div class="container" id="channelContainer"></div>

    <!-- 视频播放框 -->
    <el-dialog
            :visible.sync="videoDialogVisible"
            custom-class="video-player-dialog"
            width="75%"
            append-to-body="true"
            destroy-on-close="true"
            @opened="openPlayerDialog">
        <div id="videoContainer" style="width: 100%; height: 550px; background-color: black;">
            <video id="player-id" style="width: 100%; height: 100%" preload="auto" playsinline webkit-playsinline></video>
        </div>
    </el-dialog>

    <!-- 编辑框 -->
    <el-dialog
            title="频道信息"
            :visible.sync="dialogVisible"
            width="50%">
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="ID">
                <el-input v-model="form.id" readonly></el-input>
            </el-form-item>
            <el-form-item label="Tvg ID">
                <el-input v-model="form.tvgId"></el-input>
            </el-form-item>
            <el-form-item label="Tvg Name">
                <el-input v-model="form.tvgName"></el-input>
            </el-form-item>
            <el-form-item label="Tvg Logo">
                <el-input v-model="form.tvgLogo"></el-input>
            </el-form-item>
            <el-form-item label="Group Title">
                <el-autocomplete
                        v-model="form.groupTitle"
                        :fetch-suggestions="querySearch"
                        placeholder="请选择或输入">
                </el-autocomplete>
            </el-form-item>
            <el-form-item label="Title">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="URL">
                <el-input v-model="form.url"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handlePlay" size="small" type="primary" icon="el-icon-video-play" circle></el-button>
            <el-button size="small" type="primary" @click="handleEdit">修改</el-button>
            <el-button size="small" type="danger" @click="handleDelete">删除</el-button>
            <el-button size="small" @click="dialogVisible = false">关闭</el-button>
        </div>
    </el-dialog>
</div>

<!-- 引入 Vue 和 Element UI 的 JS -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            dialogVisible: false,
            videoDialogVisible: false,
            form: {
                id: '',
                tvgId: '',
                tvgName: '',
                tvgLogo: '',
                groupTitle: '',
                title: '',
                url: ''
            },
            groupNames: [],
            selectedGroup: '',
            searchQuery: '',
            allChannels: [],
            cities: [{
                value: '',
                label: '全部频道'
            }, {
                value: 'OK',
                label: '仅可用'
            }, {
                value: 'NO_OK',
                label: '连接失败'
            }, {
                value: 'CONNECT_TIMEOUT',
                label: '连接超时'
            }, {
                value: 'SOCKET_TIMEOUT',
                label: '播放超时'
            }, {
                value: 'SOCKET_ERROR',
                label: '直播源错误'
            }, {
                value: 'UNKNOWN',
                label: '未知'
            }],
            statusValue: ''
        },
        mounted() {
            this.fetchGroupNames();
            this.fetchData();
        },
        methods: {
            async fetchGroupNames() {
                try {
                    const response = await fetch('/groupNameList');
                    this.groupNames = await response.json();
                } catch (error) {
                    console.error('Error fetching group names:', error);
                }
            },
            async fetchData() {
                try {
                    const response = await fetch(`/list?status=${this.statusValue || ''}`);
                    const data = await response.json();
                    this.allChannels = data;
                    this.filterChannels();
                } catch (error) {
                    console.error('Error fetching data:', error);
                }
            },
            async handlePlay() {
                this.videoDialogVisible = true;
            },
            async openPlayerDialog() {
                var player = TCPlayer('player-id', {});
                player.src(this.form.url);
                player.autoplay(1);
                console.log(`Play video: ${this.form.url}`);
            },
            async handleEdit() {
                console.log('handleEdit called'); // 调试输出
                try {
                    const response = await fetch('/update', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.form)
                    });

                    if (response.ok) {
                        console.log('Update successful');
                        this.dialogVisible = false;
                        this.fetchData(); // 刷新列表
                    } else {
                        console.error('Update failed:', response.statusText);
                    }
                } catch (error) {
                    console.error('Error updating data:', error);
                }
            },
            async handleDelete() {
                console.log('delete called'); // 调试输出
                const response = await fetch('/delete', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: this.form.id
                });

                if (response.ok) {
                    console.log('Delete successful');
                    this.dialogVisible = false;
                    this.fetchData(); // 刷新列表
                } else {
                    console.error('Update failed:', response.statusText);
                }
            },
            displayData(data) {
                const container = document.getElementById('channelContainer');
                container.innerHTML = ''; // 清空旧数据

                const groupedData = data.reduce((acc, item) => {
                    if (!acc[item.groupTitle]) {
                        acc[item.groupTitle] = [];
                    }
                    acc[item.groupTitle].push(item);
                    return acc;
                }, {});

                for (const group in groupedData) {
                    const groupTitle = document.createElement('div');
                    groupTitle.className = 'group-title';
                    groupTitle.textContent = group;
                    container.appendChild(groupTitle);

                    groupedData[group].forEach(item => {
                        const card = document.createElement('div');
                        card.className = 'card';
                        card.addEventListener('click', () => this.openDialog(item));

                        const logoUrl = item.tvgLogo || `https://live.fanmingming.com/tv/${encodeURIComponent(item.tvgName)}.png`;
                        const logo = document.createElement('img');
                        logo.src = logoUrl;
                        logo.alt = item.title;
                        logo.onload = () => {
                            card.appendChild(logo);
                        }

                        const tvgName = document.createElement('div');
                        tvgName.className = 'tvg-name';
                        tvgName.textContent = item.title;
                        card.appendChild(tvgName);

                        if (item.videoHeight >= 1080) {
                            const videoHeightTag = document.createElement('img');
                            videoHeightTag.className = 'video-height-tag';
                            videoHeightTag.src = `images/${item.videoHeight}p.png`;
                            card.appendChild(videoHeightTag);
                        }

                        // 添加底部容器
                        const bottom = document.createElement('div');
                        bottom.className = 'bottom-div';

                        // 添加IPv6标识
                        if (this.isIPv6(item.url)) {
                            const ipv6Tag = document.createElement('div');
                            ipv6Tag.className = 'ipv6-tag';
                            ipv6Tag.textContent = 'IPv6';
                            bottom.appendChild(ipv6Tag);
                        }

                        // 添加状态
                        let statusTag;
                        if (item.status) {
                            statusTag = document.createElement('div');
                            statusTag.className = 'status-tag';
                            statusTag.textContent = item.status;
                        } else if (item.costTime && item.costTime !== "") {
                            statusTag = document.createElement('div');
                            statusTag.className = 'cost-time';
                            statusTag.textContent = item.costTime + " ms";
                        }

                        bottom.appendChild(statusTag);

                        card.appendChild(bottom);
                        container.appendChild(card);
                    });
                }
            },
            filterChannels() {
                const filteredData = this.allChannels.filter(item =>
                    item.title.toLowerCase().includes(this.searchQuery.toLowerCase())
                );
                this.displayData(filteredData);
            },
            isIPv6(url) {
                return !/^(http|https):\/\/(\d{1,3}\.){3}\d{1,3}/.test(url);
            },
            openDialog(item) {
                this.form.id = item.id;
                this.form.tvgId = item.tvgId;
                this.form.tvgName = item.tvgName;
                this.form.tvgLogo = item.tvgLogo;
                this.form.groupTitle = item.groupTitle;
                this.form.title = item.title;
                this.form.url = item.url;
                this.dialogVisible = true;
            },
            querySearch(queryString, cb) {
                const results = queryString
                    ? this.groupNames.filter(this.createFilter(queryString)).map(name => ({ value: name }))
                    : this.groupNames.map(name => ({ value: name }));
                cb(results);
            },
            createFilter(queryString) {
                return (name) => {
                    return name.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
                };
            }
        }
    });
</script>
</body>
</html>